<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>打字游戏</title>
    <style>
        #divall{
            width: 600px;
            height: 600px;
            border: blue 2px solid;
            margin: 0px auto;
            position: relative;
        }
        .char{
            width: 30px;
            height: 30px;
            background: aquamarine;
            color: white;
            text-align: center;
            line-height: 30px;
            position: absolute;
            top: 0px;
        }
    </style>
</head>
<body onkeydown="mykeydown(event)">
<div id = "divall">
    <div class="char">a</div>
</div>
</body>

<script>
    let topvalue = 0;
    let charobj = null;
    function down(){
            let chardivs = document.getElementsByClassName("char");
            charobj = chardivs[0];
            chardivs[0].style.top = topvalue + "px";
            topvalue++;
            if(topvalue > 600){
                alert("游戏结束!");
                clearInterval(incl);
            }
    }
    let incl = setInterval(down,10);
    function mykeydown(event) {
        if(event.key == 'a'){
            alert("恭喜你按对了");
            charobj.remove();
        }
    }
</script>
</html>